<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<h3>有题目且有相关内容的区块</h3>
<p>section是为向HTML5过度准备的类命名，section（章节、主题性质的区块），有标题，且以此为主题的的内容。</p>
<p>另一个命名为cell（细胞、单元），借table cell理解cell的含义，仅仅是cell，无特殊性的组成部分。</p>
<p>outer与inner用于区分内框外框，同时有必要为每个区块引入保持共用性和特殊性的两个类名。</p>
<pre class="prettyprint linenums">
&lt;div class="section"&gt;
	&lt;h2 class="hx"&gt;제목&lt;/h2&gt;
	&lt;div class="tx"&gt;내용&lt;/div&gt;
	&lt;a href="#" class="section_more"&gt;&lt;span&gt;›&lt;/span&gt; 더보기&lt;/a&gt;
&lt;/div&gt;
</pre>
<hr />
<h3>仅有外框的区块</h3>
<pre class="prettyprint linenums">
&lt;div class="box_type outer" style="margin-left:30px"&gt;
	&lt;div class="inner"&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;div class="lt"&gt;&lt;/div&gt;&lt;div class="rt"&gt;&lt;/div&gt;&lt;div class="lb"&gt;&lt;/div&gt;&lt;div class="rb"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr />
<h3>方形外框区块</h3>
<pre class="prettyprint linenums">

&lt;!-- UI Object --&gt;
&lt;div class="box_type"&gt;
  &lt;div class="cell"&gt;
    &lt;div class="inner"&gt;
      &lt;p style="margin-left:30px;"&gt;컨텐츠의 수직정렬이 가능한 div 박스 입니다.&lt;br&gt;
			텍스트와 이미지 모두 가능합니다.&lt;br&gt;
			동일한 크기의 박스안에 높이가 다른 사이즈의&lt;br&gt;
			컨텐츠를 담을때 쓰이면 안성맞춤입니다.&lt;br&gt;
			class=“wrap”의 높이값이 있어야 합니다.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;!-- //UI Object -->

</pre>
<hr />
<h3>仅有外框的区块</h3>
<pre class="prettyprint linenums">
&lt;div class="view_box"&gt;
	&lt;div class="guide"&gt;&lt;span class="tl"&gt;&lt;/span&gt;&lt;span class="tr"&gt;&lt;/span&gt;&lt;/div&gt;
	&lt;div class="cont"&gt;
		꿈은 이루어집니다.
	&lt;/div&gt;
	&lt;div class="guide"&gt;&lt;span class="lb"&gt;&lt;/span&gt;&lt;span class="rb"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr />
<h3>仅有外框的区块</h3>
<pre class="prettyprint linenums">
&lt;div class="box_type outer" style="margin-left:30px"&gt;
	&lt;div class="inner"&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;p&gt;내용은 이미지와 다를 수 있습니다.&lt;/p&gt;
		&lt;div class="lt"&gt;&lt;/div&gt;&lt;div class="rt"&gt;&lt;/div&gt;&lt;div class="lb"&gt;&lt;/div&gt;&lt;div class="rb"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr />
<div id="colophon">
  <address>
  <a href="http://www.bubujie.com/" target="_blank" class="logo"><img src="../img/logo_16px.gif" width="48" height="20" alt="步步街"></a> <em>Copyright ©</em> <a href="http://www.bubujie.com/" target="_blank">步步街银川网络商城</a> <span>All Rights Reserved.</span>
  </address>
</div>
</body>
</html>